<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物网站 - 首页</title>
  <link rel="stylesheet" href="./css/home.css">
  <script src="./js/home.js"></script>
  <style>
    /* 重置默认样式 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    h1 {
      font-size: 30px;
      color: #333;
    }

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li {
      margin-right: 10px;
    }

    nav ul li button {
      text-decoration: none;
      color: #333;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    /* nav ul li button.active, */
    nav ul li button:hover {
      background-color: blue;
      color: white;
    }

    nav ul li button.active:hover {
      background-color: blue;
    }

    nav ul li button:not(.active):hover {
      background-color: blue;
    }

    /* 购物车、个人主页连接的样式 */
    nav ul li a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    /* 购物车、个人主页连接的样式 */
    nav ul li a:hover {
      background-color: #e6e6e6;
    }

    main {
      text-align: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    h2 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

    p {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }

    .cta-button {
      display: inline-block;
      padding: 12px 24px;
      background-color: #333;
      color: #fff;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    .cta-button:hover {
      background-color: #666;
    }

    footer {
      text-align: center;
      color: #999;
      font-size: 14px;
    }



    /* 样式化个人主页 */
    .profile {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 居中显示 */
    }

    .profile img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      /* 圆形头像 */
      margin-bottom: 20px;
      object-fit: cover;
      /* 图片尽量填充整个容器 */
      object-position: center;
      /* 图片居中显示 */
    }


    .profile input[type="text"],
    .profile select {
      width: 100%;
      /* 充满容器宽度 */
      padding: 8px;
      margin-bottom: 15px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }

    .profile button {
      padding: 10px 20px;
      background-color: #333;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .profile button:hover {
      background-color: #666;
      /* 鼠标悬停颜色 */
    }




    /*  */

    .input-field {
      width: 200px;
      height: 40px;
      box-sizing: border-box;
      vertical-align: middle;
    }

    .input-label {
      width: 200px;
      height: 40px;
      box-sizing: border-box;
      vertical-align: middle;
    }


    /* 实现左右结构 */
    .input-group {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 头部导航栏 -->
    <header>
      <h1>购物网站</h1>
      <nav>
        <ul>
          <li><button class="active" type="button" onclick="handleButtonClick(0)">推荐</button></li>
          <li><button type="button" onclick="handleButtonClick(1)">衣物</button></li>
          <li><button type="button" onclick="handleButtonClick(2)">食品</button></li>
          <li><button type="button" onclick="handleButtonClick(3)">化妆品</button></li>
          <li><button type="button" onclick="handleButtonClick(4)">电子产品</button></li>
          <li><button type="button" onclick="handleButtonClick(5)">生活用品</button></li>
        </ul>
      </nav>

      <nav>
        <ul>
          <li><a href="cart.html">购物车</a></li>
          <li><a href="Personal.html">个人主页</a></li>
        </ul>
      </nav>

    </header>
    <!-- 主要内容区域 -->
    <main>
      <div class="container">
        <div class="profile">
          <img id="avatar" src="./image/hua.jpg" alt="头像">

          <div class="profile-info">
            <div>
              用户ID：<span id="userId" class="input-field non-editable-field"></span>
            </div>
            <div class="input-group">
              <label class="input-label" for="nickname">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</label>
              <input id="nickname" class="input-field" type="text" value="昵称">
            </div>
            <div class="input-group">
              <label class="input-label" for="sex">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
              <select id="sex" class="input-field">
                <option value="其他">其他</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="input-group">
              <label class="input-label" for="phone_number">手机号码：</label>
              <input id="phone_number" class="input-field" type="text" value="">
            </div>

            <div class="input-group">
              <label class="input-label" for="account_balance">账户余额：</label>
              <input id="account_balance" class="input-field" type="text" readonly>
            </div>

            <div class="input-group">
              <label class="input-label" for="old_password">原密码：</label>
              <input id="old_password" class="input-field" name="password" type="password">
            </div>
            <div class="input-group">
              <label class="input-label" for="new_password">新密码：</label>
              <input id="new_password" class="input-field" name="password" type="password">
            </div>
            <div class="input-group">
              <label class="input-label" for="confirm_password">确认密码：</label>
              <input id="confirm_password" class="input-field" name="password" type="password">
            </div>
            <button id="updateInfo" type="button">修改信息</button>
            <button id="changePassword" type="button">修改密码</button>
            <button id="changeAvatar" type="button">修改头像</button>
            <button id="logout" type="button">退出登录</button>
          </div>
        </div>
      </div>
    </main>


    <!-- 底部版权信息 -->
    <footer>
      <p>&copy; 2023 购物网站. All rights reserved.</p>
    </footer>
  </div>
  <!-- 这样才可以发送ajax请求 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
    //初始化个人主页
    $(function () {
      // ================= 获取用户详情， =================
      // 发送AJAX请求，成功时 调用initUserInfo方法，完成页面数据初始化
      $.ajax({
        //  请求⽅法
        type: 'get',
        // url
        url: 'initialize',
        //  成功回调
        success: function (body) {
          //  ⽤状态码判断是否成功
          if (body.code == 200) {
            //  设置⽤⼾信息
            initUserInfo(body.data);
          } else {
            alert(body.msg)
          }
        },
        error: function () {
          console.error('Error: Login request failed');
        }
      });
    });

    // ================= 初始化页面内容 =================
    function initUserInfo(user) {
      // 默认头像路径
      if (!user.avatarAddress) {
        user.avatarAddress = './image/hua.jpg'; // 设置默认头像路径
      }
      // 用户ID
      $('#userId').text(user.uid);
      // 头像
      $('#avatar').attr('src', user.avatarAddress);
      // 昵称
      $('#nickname').val(user.nickname);
      // 性别
      if (user.sex === 0) {
        $('#sex').val('女');
      } else if (user.sex === 1) {
        $('#sex').val('男');
      } else {
        $('#sex').val('其他');
      }
      // 手机号码
      $('#phone_number').val(user.phoneNumber);
      // 账户余额
      $('#account_balance').val(user.balanceOfAccount);
    }

    // 修改个人信息
    $('#updateInfo').click(save);
    function save() {
      // 获取输入框中的值
      var nickname = $('#nickname').val();
      var phoneNumber = $('#phone_number').val();
      var sex = $('#sex').val();
      // var sex = (sexValue === '男') ? 1 : (sexValue === '女') ? 0 : 2;
      // 检查手机号格式是否正确
      if (phoneNumber.length !== 11 || !/^\d+$/.test(phoneNumber)) {
        alert('手机号格式不正确');
        return;
      }
      // 构造要发送给后端的数据对象
      var data = {
        nickname: nickname,
        phoneNumber: phoneNumber,
        sex: sex
      };
      // 发送 AJAX 请求
      $.ajax({
        type: 'POST',
        url: 'save', // 后端保存信息的接口URL
        data: data,
        success: function (response) {
          alert("修改成功！")
        },
        error: function (error) {
          // 处理错误响应
          console.error('保存信息时出错:', error);
        }
      });
    }


    //修改密码
    $('#changePassword').click(change);
    function change() {
      var oldPassword = $('#old_password').val();
      var newPassword = $('#new_password').val();
      var confirmPassword = $('#confirm_password').val();
      // 检查新密码和确认密码是否一致
      if (newPassword !== confirmPassword) {
        alert('新密码和确认密码不一致');
        return;
      }
      // 发送密码修改请求给后端
      $.ajax({
        type: 'POST',
        url: 'change',
        data: {
          oldPassword: oldPassword,
          newPassword: newPassword,
          confirmPassword: confirmPassword
        },
        success: function (body) {
          if (body.code == 200) {
            alert('密码修改成功,请重新登陆！');
            window.location.href = 'login.html';
          } else {
            alert('密码修改失败！');
          }
        },
        error: function (error) {
          // 处理密码修改失败的逻辑
          alert('密码修改失败');
        }
      });
    }


    // 修改头像
    $('#changeAvatar').click(uploadAvatar);
    function uploadAvatar() {
      // 创建一个<input type="file">元素
      var fileInput = document.createElement('input');
      fileInput.type = 'file';

      // 添加change事件监听器，处理文件选择
      fileInput.addEventListener('change', handleFileSelect);

      // 触发文件选择对话框
      fileInput.click();
    }

    function handleFileSelect(event) {
      var file = event.target.files[0];
      // 创建一个FormData对象，用于将文件数据发送到后端
      var formData = new FormData();
      formData.append('avatar', file);
      // 发送文件数据到后端
      $.ajax({
        type: 'POST',
        url: 'upload', // 后端上传头像的接口URL
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
          // 处理成功响应
          console.log('头像上传成功');
        },
        error: function (error) {
          // 处理错误响应
          console.error('上传头像时出错:', error);
        }
      });
    }


    // 获取【退出登录按钮】
    const logoutButton = document.getElementById('logout');
    logoutButton.addEventListener('click', function () {
      $.ajax({
        type: 'get',
        url: 'logout',
        success: function (body) {
          if (body.code == 200) {  // 退出登录，跳转到登陆页面
            alert(body.msg)
            window.location.href = 'login.html';
          } else {  // 退出登录失败，打印提示信息。
            alert(body.msg)
            window.location.href = 'login.html';
          }
        },
        error: function () {
          console.error('Error: Login request failed');
        }
      });
    });

    // 跳转到指定home
    function handleButtonClick(index) {
      var url = 'home.html?index=' + encodeURIComponent(index);
      window.location.href = url;
    }








  </script>
</body>

</html>